<template>
	<view 
		class="content" 
		v-if="showHeader"
		style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;"
	>
		<camera 
			:binderror="handleCameraError" 
			:device-position="devicePosition" 
			flash="off"
			style="width: 100%; height: 100vh;"
		>
			<cover-image 
				src="https://img-blog.csdnimg.cn/20210126152753150.png"
				style="width: 100%;height: 700rpx;margin-top:100rpx;"
			></cover-image>
		</camera>
		
		<cover-view
			class="btns" 
			style=""
		>
			<cover-view
				class="button"
				@click="takePhotoByHead"
			>拍照</cover-view>
		</cover-view>
		
		
		<cover-view style="position: absolute;top: 40rpx;right: 40rpx;font-size: 40rpx;" @click="close">
		<cover-image src="@/pagesB/static/img/advertising/close.png" 
		style="height: 50rpx;width:50rpx;"
		></cover-image>
		</cover-view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				authCamera: false,
				showHeader: true,
				ctxHeader: null,
				devicePosition: 'front'
			}
		},
		watch: {
			showHeader(val) {
				return
				//获取相机权限
				uni.getSetting({
					success:(res)=> {
						if (res.authSetting["scope.camera"]) {
							this.authCamera = true
						} else {
							this.authCamera = false
							uni.showModal({
								title: '权限申请',
								content: '需要摄像头权限，以拍摄照片。',
								success: (btn_res) => {
									if (btn_res.confirm) {
										uni.authorize({
											scope: 'scope.camera',
											success() {
												this.authCamera = true
											}
										})
									} else if (btn_res.cancel) {

									}
								}
							});
						}
					}
				})
			}
		},
		created() {
			//获取相机权限
			uni.getSetting({
				success:(res) => {
					if (res.authSetting["scope.camera"]) {
						this.authCamera = true
					} else {
						this.authCamera = false
						uni.showModal({
							title: '权限申请',
							content: '需要摄像头权限，以拍摄照片。',
							success: (btn_res) => {
								if (btn_res.confirm) {
									uni.openSetting({
										success:()=>{
											uni.authorize({
												scope: 'scope.camera',
												success:()=>{
													this.authCamera = true
												},
												fail: () => {
													this.$emit('close')
												}
											})
										}
									})
									
								} else if (btn_res.cancel) {
									this.$emit('close')
								}
							}
						});
					}
				}
			})
		},
		methods: {
			//拍摄头像
			takePhotoByHead() {
				this.showHeader = true //开启拍照
				this.$emit("takePhoto")
			},
			handleCameraError() {
				uni.showToast({
					title: '用户拒绝使用摄像头',
					icon: 'none'
				})
			},
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 100rpx;
		height: 100rpx;
	}
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff;
		box-sizing: border-box;
		height: 100%;
		width: 100vw;

		.btns {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			height: 20vh;
			position: fixed;
			bottom: 0;
			z-index:99;
			.button {
				width:180rpx;
				height: 80rpx;
				background-color: #3d88c1;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
			}
			.button:active{
				background-color: skyblue;
			}
		
		}
	}
</style>
